<template>
	<!-- :style="{height:(lockCompilations || lockEpisodic) ? '757rpx' : '532rpx'}"  -->
	<view class="dramaBox">
		<view v-if="lockCompilations || lockEpisodic" class="dramaTop">
			<view class="topLeft">
				<view :style="{fontSize:!tempJujiCheck  ? '46rpx' : '40rpx'}" class="zhuanxiang">{{!tempJujiCheck ? '粉丝专享价' : '粉丝限时提前观看福利'}}</view>
				<view class="fansNum">{{!tempJujiCheck ? '10000+购买' : '供2022.2.11-3.11限时观看'}}</view>
			</view>
			<view v-if="!hideTime && isTime && !tempJujiCheck" class="topRight">
				<view class="timeDes">优惠倒计时</view>
				<view class="timeNum"><countTime @timeFinish="timeFinish" :countTime="isTime"></countTime></view>
			</view>
		</view>
		<view style="height: 50rpx;width: 100%;" v-if="!lockCompilations && !lockEpisodic"></view>
		<view v-if="lockCompilations" class="dramaMid">
			<view class="midDes">- 感谢您支持作者，购买后继续观看 -</view>
			<view class="midTitle">《{{ compInfo.title }}》{{ (lockEpisodic || lockAds) && lockCompilations ? '' : '完整版' }}</view>
			<view class="midMoney border1">
				<view style="color: #333333;font-size: 32rpx;font-weight: bold;">价格：</view>
				<view style="color:#FA6547;margin-right: 14rpx;font-weight: bolder;display: flex;align-items: center;justify-content: center;">
					<view style="font-size: 32rpx;">¥</view>
					<view style="font-size: 55rpx;">{{ lockCompilations.fruitNum ? (lockCompilations.fruitNum / 100).toFixed(2) : 0 }}</view>
				</view>
				<view style="color: #999999;font-size: 28rpx;text-decoration: line-through;margin-right: 47rpx;">
					{{ lockCompilations.fruitNum ? ((lockCompilations.fruitNum + 200) / 100).toFixed(2) : 0 }}
				</view>
				<view class="discountBoxRed" style="color: #FA6547;">已抵扣-2元</view>
			</view>
			<view v-if="(lockEpisodic || lockAds) && lockCompilations" class="btnBox">
				<view @click="lockEpisodicClick" v-if="lockEpisodic" style="margin-right:30rpx;" class="isButton buttonLeft">{{ lockEpisodic.fruitNum | fruitNum10 }}{{moneyName}}解锁本集</view>
				<view @click="lockAdsClick(3)" v-else-if="lockAds"  style="margin-right:30rpx;" class="isButton buttonLeft">观看广告解锁</view>
				<view @click="lockCompilationsClick" class="isButton buttonRight breathe">解锁全集</view>
			</view>
			<view v-else class="btnBox">
				<view style="width:630rpx;" @click="lockCompilationsClick" class="isButton buttonRight breathe">解锁全集</view>
			</view>
		</view>
		<view v-else-if="lockEpisodic" class="dramaMid">
			<view class="midDes">- 感谢您支持作者，购买后继续观看 -</view>
			<view class="midTitle">《{{ compInfo.title }}》第{{ videoInfo.sequence + 1 }}集</view>
			<view class="midMoney border2">
				<view style="color: #333333;font-size: 32rpx;font-weight: bold;">价格：</view>
				<view style="color:#FA6547;margin-right: 14rpx;font-weight: bolder;display: flex;align-items: center;justify-content: center;">
					<view style="font-size: 45rpx;">{{ (lockEpisodic.fruitNum || 0) | fruitNum10 }}{{moneyName}}</view>
				</view>
				<view style="color: #999999;font-size: 28rpx;text-decoration: line-through;margin-right: 47rpx;">
					{{ (lockEpisodic.fruitNum ? lockEpisodic.fruitNum + 20 : 20) | fruitNum10 }}{{moneyName}}
				</view>
				<view class="discountBox" style="font-weight: bold;">优惠券抵扣-{{ 20 | fruitNum10 }}{{moneyName}}</view>
			</view>
			<view v-if="lockEpisodic && lockAds" class="btnBox">
				<view v-if="isViewPayLock" @click="lockEpisodicClick" style="width: 630rpx;" class="isButton buttonRight breathe">解锁本集</view>
				<view v-else @click="lockAdsClick(2)" style="margin-left:30rpx;width: 630rpx;" class="isButton buttonRight breathe">观看广告解锁</view>
			</view>
			<view v-if="lockEpisodic && !lockAds" class="btnBox">
				<view style="width: 630rpx;" @click="lockEpisodicClick" class="isButton buttonRight breathe">解锁本集</view>
			</view>
		</view>
		<view v-else-if="lockAds" class="dramaMid">
			<view class="midDes">- 感谢您支持作者，观看广告后继续观看 -</view>
			<view class="midTitle">《{{ compInfo.title }}》第{{ videoInfo.sequence + 1 }}集</view>
			<view class="btnBox" style="margin-top:60rpx;">
				<view style="width: 630rpx;" @click="lockAdsClick(1)" class="isButton buttonRight breathe">观看广告解锁</view>
			</view>
		</view>
		<view class="isChooseBox"><chooseBox @chooseSeq="chooseSeq" @isNext="isNext" @isLast="isLast" :white="true"></chooseBox></view>
	</view>
</template>

<script>
import chooseBox from './chooseBox.vue';
import countTime from './countTime.vue';
import { compareVersion } from '@/util/util.js'
export default {
	components: { chooseBox, countTime },
	name: 'dramaList',
	props: {
		balance: {
			type: Number,
			default: 0
		},
		videoInfo: {
			type: Object,
			default: {}
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		compInfo: {
			type: Object,
			default: {}
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		tempJujiCheck:{
			type:Boolean,
			default:false
		},
		viewBox: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			moneyName:this.moneyName,
			isTime: 0,
			hideTime: false,
			chooseIndex: 0,
			lockAds:'',
			lockEpisodic: '',
			lockCompilations: '',
			isViewPayLock: false,
			isIos: false
		};
	},
	watch: {
		videoInfo: {
			 handler(newVal) {
				// 自动触发锁点击
				if(this.lockEpisodic && !this.lockCompilations) {
					this.$emit('viewBox', false)
					this.buyClick1()	
				} else {
					this.$emit('viewBox', true)
				}
			},
			deep: true
		}
	},
	methods: {
		/**
		 * iOS是否能支付K币锁判断
		 * ios且11.6.50版本以上的不能支付
		 * 这里判断是否是安卓或者版本小于11.6.50
		 */
		async iosCanPayLock() {
			let isIos = getApp().globalData.isIos
			this.isIos = getApp().globalData.isIos
			let appMess = await ks.getSystemInfoSync()
			let versionStatus = !!(compareVersion(appMess.version, '11.6.50') < 0)
			console.log('版本1111---', versionStatus)
			console.log('isIos1111---', isIos)
			return !!(!isIos || versionStatus)
		},
		lockAdsClick(type){
			if(type == 2){
				getApp().globalData.lockEpisodic = this.lockEpisodic;
			}else if(type == 3){
				getApp().globalData.lockCompilations = this.lockCompilations;
			}
			getApp().globalData.btnType = type;
			console.log('lockAdsClick');
			this.$emit('lockAdsClick',this.lockAds['index']);
		},
		timeFinish() {
			uni.setStorageSync('countTime', new Date().getTime() + 86400000 + 3600000);
			this.hideTime = true;
		},
		chooseSeq() {
			this.$emit('chooseSeq');
		},
		isNext() {
			this.$emit('isNext');
		},
		isLast() {
			this.$emit('isLast');
		},
		buyClick() {
			this.$emit('buyClick', this.chooseIndex);
		},
		buyClick1() {
			this.$emit('buyClick1', this.chooseIndex);
		},
		isClose() {
			this.$emit('isClose');
		},
		lockCompilationsClick() {
			this.$emit('buyClick', this.lockCompilations['index']);
		},
		lockEpisodicClick() {
			this.$emit('buyClick', this.lockEpisodic['index']);
		},
		dramaClick(index) {
			if (this.currentIndex != index) {
				this.$emit('changeTab', index); //设置swiper的第几页
			}
		}
	},
	onLoad() {},
	async onReady() {
		this.isViewPayLock = await this.iosCanPayLock()
		console.log('isViewPayLock', this.isViewPayLock)
		let tempTime = uni.getStorageSync('countTime');
		if (!tempTime) {
			uni.setStorageSync('countTime', new Date().getTime() + 86400000);
			tempTime = uni.getStorageSync('countTime');
		}
		this.isTime = tempTime;
		console.log('onReady', this.videoInfo);
		let goodsLocks = this.videoInfo.goodsLocks.map((item, index) => {
			item['index'] = index;
			return item;
		});
		console.log('goodsLocks', goodsLocks);
		if (goodsLocks && goodsLocks.length > 0) {
			for (let i = 0; i < goodsLocks.length; i++) {
				if (goodsLocks[i]['goodsType'] == 'EPISODIC_DRAMA' && goodsLocks[i]['releaseWay'] == 'FRUIT_PAY') this.lockEpisodic = goodsLocks[i];
				else if (goodsLocks[i]['goodsType'] == 'COMPILATIONS' && goodsLocks[i]['releaseWay'] == 'FRUIT_PAY') this.lockCompilations = goodsLocks[i];
				else if (goodsLocks[i]['goodsType'] == 'EPISODIC_DRAMA' && goodsLocks[i]['releaseWay'] == 'WATCH_THE_ADS') this.lockAds = goodsLocks[i];
			}
		}
		if(!this.lockEpisodic && !this.lockCompilations && this.lockAds){
			this.$emit('onlyLockAd',true);
		}

		// 自动触发锁点击
		// this.$emit('viewBox', true)
		let isIos = getApp().globalData.isIos
		if(this.lockEpisodic && !this.lockCompilations && !isIos) {
			this.$emit('viewBox', false)
			this.buyClick()	
		} else {
			this.$emit('viewBox', true)
		}
	}
};
</script>

<style lang="scss">
	.zhuanxiang {
	  position: absolute;
	  left: 54rpx;
	  font-weight: bolder;
	  font-size: 46rpx;
	  top: 10rpx;
	}
.timeBox {
	background: #00000012;
	border-radius: 5rpx;
	color: white;
	font-size: 30rpx;
	padding: 4rpx;
	margin-right: 4rpx;
}
.isChooseBox {
	position: relative;
	bottom: 0;
	width: 100vw;
	padding-bottom: calc(env(safe-area-inset-bottom));
	left: 0;
}
.btnBox {
	.buttonRight {
		width: 310rpx;
		height: 90rpx;
		background: #ff6e17;
		border-radius: 45rpx;
		color: white;
	}
	.buttonLeft {
		width: 310rpx !important;
		height: 90rpx !important;
		background: #efefef !important;
		border-radius: 45rpx;
		color: #999999 !important;
	}
	.isButton {
		line-height: 90rpx;
		font-size: 30rpx;
		text-align: center;
	}
	display: flex;
	align-items: center;
	justify-content: center;
}
.dramaMid {
	.border1::before {
		position: absolute;
		content: '';
		bottom: -10rpx;
		width: calc(100% - 16vw);
		height: 1px;
		left: 16vw;
		background-color: #ededed;
	}
	.border2::before {
		position: absolute;
		content: '';
		bottom: -10rpx;
		width: calc(100% - 12vw);
		height: 1px;
		left: 12vw;
		background-color: #ededed;
	}
	.midMoney {
		.discountBoxRed {
			background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_buy.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center center;
			color: #774700;
			font-size: 26rpx;
			padding: 0 33rpx;
		}
		.discountBox {
			background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_before.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			color: #774700;
			font-size: 26rpx;
			padding: 0 33rpx;
		}
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		margin-bottom: 55rpx;
	}
	.midTitle {
		text-align: center;
		color: #181818;
		font-size: 40rpx;
		margin-top: 20rpx;
	}
	.midDes {
		text-align: center;
		color: #666666;
		font-size: 28rpx;
	}
}
.dramaTop {
	.topRight {
		.timeNum {
			margin-top: 10rpx;
			font-size: 30rpx;
		}
		.timeDes {
			font-size: 24rpx;
		}
		position: absolute;
		right: 37rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.fansNum {
		position: absolute;
		left: 54rpx;
		font-size: 24rpx;
		top: 69rpx;
	}
	color: white;
	position: relative;
	height: 117rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-image: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/bg_fansNew.png');
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.isClick {
	box-shadow: 0 0 5px 0 rgba(216, 0, 0, 0.3);
	border: 1px solid #ff3752 !important;
}
.buttonBox {
	display: flex;
	align-items: center;
	margin-top: 40rpx;
	justify-content: center;
	color: white;
	.isButton {
		width: 630rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: #ff6e17;
		border-radius: 40rpx;
	}
}
.midItem {
	.itemNum {
		color: #ff7200;
		font-size: 28rpx;
	}
	.itemDes {
		color: #000000;
		font-size: 34rpx;
		font-weight: bold;
	}
	flex-direction: column;
	border: 1px solid #bebebe;
	width: 300rpx;
	height: 174rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.midItem100 {
	width: 630rpx !important;
}
.midBox {
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.balanceBox {
	.balanceRight {
		font-size: 24rpx;
	}
	.balanceLeft {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	padding: 0 32rpx;
	margin-top: 20rpx;
	color: #5d5d5d;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.isLock {
	position: absolute;
	right: 0;
	top: 0;
	width: 40rpx;
	height: 29rpx;
}
.isChoose {
	height: 32rpx;
	width: 26rpx;
}
.dramaContent {
	flex-wrap: wrap;
	padding-left: 32rpx;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-bottom: env(safe-area-inset-bottom);
}
.isMargin {
	margin-left: 33rpx;
}
.dramaItem {
	position: relative;
	margin-right: 14rpx;
	margin-bottom: 14rpx;
	color: #ffffff;
	font-size: 24rpx;
	width: 86rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86rpx;
	background: #2a2a2a;
	border-radius: 8rpx;
}
.dramaBox {
	.dramaTitle {
		height: 90rpx;
		display: flex;
		font-size: 32rpx;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;
	}
	color: #000000;
	position: fixed;
	z-index: 99;
	bottom: -132rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 34rpx 34rpx 0rpx 0rpx;
}
</style>
